<template>
    <div class="box">
        <header>
            <!-- 头部导航 -->
            <div class="head_box">
                <!-- 列表 -->
                <ul>
                    <li v-for="item in NavigationList" :key="item" @mousemove="mouseApp(item)" >
                        <a href="#">{{item}}</a>
                        <span class="head_span">|</span>
                    </li>
                </ul>
                <!-- 二维码盒子 -->
                <div class="head_ewm_box" ref="ewmbox" @mouseleave="mouseoverApp()">
                    <!-- 二维码 -->
                    <span class="head_ewm" ref="ewm">
                        <!-- 小三角 -->
                    <span class="head_ewm_T"></span>
                    <img src="../assets/Head/download.png" alt="">
                    <p style="text-align: center;font-size: 15px;">小米商城APP</p>
                    </span>
                </div>
                <!-- 购物车 -->
                <div class="head_ShoppingCart" @mousemove="Cart_move" @mouseleave="Cart_leave">
                   <i class="el-icon-shopping-cart-2" ></i>
                   <a href="#"><span ref="span">购物车 ({{Quantity}})</span></a>
                    <div class="Cart_show" v-show="isAuth" ref="Cart">
                           <p>{{Carttext}}</p>
                    </div>
                </div>
               
                 <!-- 登录 -->
                <div class="head_right">
                    <ul>
                        <li><a href="#">登录</a><span class="head_span">|</span></li>
                        <li><a href="#">注册</a><span class="head_span">|</span></li>
                        <li><a href="#">消息通知</a><span class="head_span">|</span></li>
                   </ul>
                </div>
                
            </div>
        </header>
    </div>
</template>

<script>

export default {
    name:'Head',
    data(){
        return{
            // 列表渲染
            NavigationList:['小米官网','小米商城','MIUI','IoT','云服务','天星数科','有品','小爱开放平台','企业团购','资质证照'
            ,'协议规则','下载APP','Select Location'],
            // 商品数量
            Quantity:0,
            // 购物车为空显示文字
            Carttext:'购物车中还没有商品，赶紧选购吧！',
            // 购物车下拉显示与隐藏
            isAuth:false,
        }
    },
    methods:{
        // APP下载下拉效果
        mouseApp(name){
            if(name==='下载APP')
            {
                 this.$refs.ewmbox.style.display='block';
                 setTimeout(()=>{
                     this.$refs.ewm.style.height='90px';
                 },200)
            }
        },
        mouseoverApp(){
                    setTimeout(()=>{
                         this.$refs.ewmbox.style.display='none';
                    },700)
                     this.$refs.ewm.style.height='0px';
        },

        // 购物车的下拉效果
        Cart_move(){
            this.isAuth=true;
            this.$refs.span.style.color='#ff6700';
        },
        Cart_leave(){
            this.isAuth=false;
            this.$refs.span.style.color='#ccc';
        }
       
    }
        
}
</script>

<style scoped>
/* 列表 */
    header{
        width: 100%;
        height: 40px;
        background-color: #333;
    }
    header .head_box{
         position: relative;
         margin: 0 auto;
         width: 1226px;
         height: 100%;
         font-size: 12px;
         background-color: #333;
    }
    .head_box ul li{
        float: left;
        margin-right: 6px;
        height: 40px;
        line-height:40px;
        
    }
    .head_box ul li a{
         color:#b0b0b0;
    }
    .head_box ul li a:hover{
        color: white;
    }

    .head_box .head_span{
        margin: 0 .3em;
        color: #424242;
    }
/* 二维码 */
    .head_box .head_ewm{
        display:inline-block;
        position: absolute;
        top:40px;
        right:510px;
        width:90px;
        height:0px;
        transition: all 0.6s;
        box-shadow: 0px 0px 5px #ccc;
        z-index: 111;
    }
     .head_box .head_ewm img{
        width: 100%;
        height: 100%;
     }
     .head_box .head_ewm .head_ewm_T{
        position: absolute;
        top:-7px;
        left: 35px;
        width:0px;
        height:0px;
        border-right: 7px solid transparent;
        border-left: 7px solid transparent;
        border-bottom: 7px solid #fff;
     }

     .head_box .head_ewm_box{
        display:none;
     }

/* 登录盒子 */
     .head_right{
        float: right;
        width:150px;
        height: 100%;
     }
     /* 购物车 */
     .head_ShoppingCart{
        position: relative;
        float: right;
        width: 120px;
         height: 100%;
        background-color: #424242;
     }
     .el-icon-shopping-cart-2{
        margin-left: 10px;
        line-height: 40px;
        color: #ff6700;
        font-size:15px;
     }
     .head_ShoppingCart span{
        display: inline-block;
        margin-left: 10px;
        font-size: 15px;
        color:#ccc;
     }
    .head_ShoppingCart span:hover{
         color: #ff6700;
      }
    .head_box  .head_ShoppingCart:hover{
        background-color: white;
     }

     /* 购物车 展示 */
     .Cart_show{
      overflow: hidden;
      position: absolute;
      left:-156px;
      width: 276px;
      height:110px;
      background-color: white;
      box-shadow: 0px 7px 14px #ccc;
      z-index:2;
     }
     .Cart_show p{
        text-align: center;
        line-height: 110px;
     }
      .head_box  .head_ShoppingCart:hover .Cart_show{
        display:block;
        animation: xiaochuan 1s forwards;
        transition: all 2s;
      }
/* 购物车动画 */
      @keyframes xiaochuan{
        0%{
            height: 0px;
        }
        100%{
            height: 110px;
        }
      }

    
      

</style>